<template>
	<view class="">
		<view class="box-top">
			<u-tabs lineWidth="50;margin-left: 60rpx;" :list="list1" @click="click"
				itemStyle="padding-left: 105rpx; height: 100rpx;font-weight: bold; " :activeStyle="{
				            color: '#3DA0F2',
				            fontWeight: 'bold',
				            transform: 'scale(1.05)'
				        }" :inactiveStyle="{
				            color: '#606266',
				            transform: 'scale(1)'
				        }"></u-tabs>
		</view>
		<view class="box-centent">
			<view v-for="(item,index) in lists " class="one">
				<view class="one-b">
					<view class="one-name">{{item.name}}</view>
					<view class="one-state">{{item.state}}</view>
				</view>
				<view class="one-a">
					<view class="one-time">
						{{item.time}}
					</view>
					<view class="one-isaddress">
						{{item.isaddress}}
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				list1: [{
					name: '全部',
				}, {
					name: '已出报告',
				}, {
					name: '未出报告'
				}],
				lists: '',
				listone: [{
					name: 'B超检查',
					state: '正常',
					time: '登记时间：2020-12-08 09:28:12',
					isaddress: '查看报告'
				}, {
					name: '核磁共振检查',
					state: '未出结果',
					time: '登记时间：2020-12-08 09:28:12',
					isaddress: '查看报告'
				}, {
					name: '尿检',
					state: '异常',
					time: '登记时间：2020-12-08 09:28:12',
					isaddress: '查看报告'
				}],
				listtwo: [{
					name: 'B超检查',
					state: '正常',
					time: '登记时间：2020-12-08 09:28:12',
					isaddress: '查看报告'
				}],
				listthree: [{
					name: '核磁共振检查',
					state: '未出结果',
					time: '登记时间：2020-12-08 09:28:12',
					isaddress: '查看报告'
				}]
			};
		},
		created() {
			//显示第一张
			this.lists = this.listone
		},
		methods: {
			click(e) {
				console.log(e.index);
				this.$nextTick(() => {
					if (e.index == 0) {
						this.lists = this.listone
					} else if (e.index == 1) {
						this.lists = this.listtwo
					} else if (e.index == 2) {
						this.lists = this.listthree
					}
				})
			},
		}
	}
</script>

<style>
	.box-top {
		font-weight: bold;
	}

	.box-centent {
		background-color: #F5F5F5;
		height: 100vh;
		width: 100%;
		padding-top: 10rpx;
	}

	.one {
		width: 92%;
		height: 190rpx;
		border-radius: 20rpx;
		background-color: white;
		margin: 27rpx;
	}

	.one-b {
		display: flex;
		justify-content: space-between;
		padding: 25rpx;
	}

	.one-name {
		font-weight: bold;
		font-size: 28rpx;
	}

	.one-state {
		font-size: 27rpx;
		margin-top: 5rpx;
	}

	.one-a {
		display: flex;
		justify-content: space-between;
		padding: 25rpx;
	}

	.one-time {
		font-size: 25rpx;
		color: #777777;
	}

	.one-isaddress {
		/* border: 1rpx solid #ccc; */
		border-radius: 30rpx;
		padding: 10rpx;
		font-size: 25rpx;
		padding-left: 37rpx;
		padding-right: 37rpx;
		margin-top: -10rpx;
		background-color: #3DA0F2;
		color: white;
	}
</style>
